import 'package:flutter/material.dart';

class InputAndForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("输入框和表单"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
//            new UserLoginInput(),
//            new FocusTestRoute(),
//            new CustomInputStyle(),
//            new ThemeField(),
            new FromWidget()
          ],
        ),
      ),
    );
  }
}

/*自定义样式*/
class CustomInputStyle extends StatefulWidget {
  @override
  _CustomInputStyle createState() => new _CustomInputStyle();
}

class _CustomInputStyle extends State<CustomInputStyle> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
              labelText: "请输入用户名",
              prefixIcon: Icon(Icons.person),
              //未获取到焦点下划线设置为灰色
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey)),
              //获取到焦点的设置为蓝色
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.blue))),
        )
      ],
    );
  }
}

/*TextField 绘制下划线的时候使用的颜色是主题色里面的hitColor
* 主题色可以通过InputDecorationTheme来设置
* */
class ThemeField extends StatefulWidget {
  @override
  _ThemeField createState() => _ThemeField();
}

class _ThemeField extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Theme(
            data: Theme.of(context).copyWith(
                hintColor: Colors.grey[200],
                inputDecorationTheme: InputDecorationTheme(
                    labelStyle: TextStyle(color: Colors.grey),
                    hintStyle: TextStyle(color: Colors.grey, fontSize: 14.0))),
            child: Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(
                      labelText: "用户名",
                      hintText: "手机号或者邮箱",
                      prefixIcon: Icon(Icons.person)),
                ),
                TextField(
                  decoration: InputDecoration(
                      labelText: "密码",
                      hintText: "登录密码",
                      prefixIcon: Icon(Icons.lock),
                      hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0),
                      border: InputBorder.none //隐藏下划线
                      ),
                  obscureText: true,
                ),
              ],
            ))
      ],
    );
  }
}

/*用户登录*/
class UserLoginInput extends StatefulWidget {
  @override
  _UserLoginInput createState() => new _UserLoginInput();
}

/**
 * 登录输入框
 *
 *  获取input输入方式：使用onChanged和controller
 *
 */
class _UserLoginInput extends State<UserLoginInput> {
  @override
  Widget build(BuildContext context) {
    TextEditingController _selectionController = TextEditingController();
    _selectionController.text = "hello Flutter"; //指定默认的文本
    _selectionController.selection = TextSelection(
        //指定光标的位置
        baseOffset: _selectionController.text.length,
        extentOffset: _selectionController.text.length);
    return Column(
      children: <Widget>[
        TextField(
          autofocus: true,
          //是否自动获取焦点
          //用来控制TextField的外观显示。如文本、背景颜色、边框等
          decoration: InputDecoration(
            labelText: "手机号", //设置TextField的文本
            hintText: "请输入手机号", //设置TextField的提示
            prefixIcon: Icon(Icons.person),
          ),
          maxLines: 1,
          textAlign: TextAlign.left,
          keyboardType: TextInputType.phone,
          onChanged: (value) {
            print("输入的手机号:$value");
          },
          controller: _selectionController,
        ),
        TextField(
            decoration: InputDecoration(
                labelText: "密码",
                hintText: "请输入您的密码",
                prefixIcon: Icon(Icons.lock)),
            obscureText: true, //是否隐藏编辑的文本使用  ....替换
            onChanged: (value) {
              print("输入的密码:$value");
            })
      ],
    );
  }
}

class FocusTestRoute extends StatefulWidget {
  @override
  _FocusTestRouteState createState() => new _FocusTestRouteState();
}

class _FocusTestRouteState extends State<FocusTestRoute> {
  FocusNode focusNode1 = new FocusNode();
  FocusNode focusNode2 = new FocusNode();
  FocusScopeNode focusScopeNode;

  /*焦点的监听事件*/

  @override
  Widget build(BuildContext context) {
    focusNode1.addListener(() {
      print(focusNode1.hasFocus);
    });
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          TextField(
            autofocus: true,
            focusNode: focusNode1, //关联focusNode1
            decoration: InputDecoration(labelText: "input1"),
          ),
          TextField(
            focusNode: focusNode2, //关联focusNode2
            decoration: InputDecoration(labelText: "input2"),
          ),
          Builder(
            builder: (ctx) {
              return Column(
                children: <Widget>[
                  RaisedButton(
                    child: Text("移动焦点"),
                    onPressed: () {
                      //将焦点从第一个TextField移到第二个TextField
                      // 这是一种写法 FocusScope.of(context).requestFocus(focusNode2);
                      // 这是第二种写法
                      if (null == focusScopeNode) {
                        focusScopeNode = FocusScope.of(context);
                      }
                      focusScopeNode.requestFocus(focusNode2);
                    },
                  ),
                  RaisedButton(
                    child: Text("隐藏键盘"),
                    onPressed: () {
                      // 当所有编辑框都失去焦点时键盘就会收起
                      focusNode1.unfocus();
                      focusNode2.unfocus();
                    },
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}

/**
 * From表单
 * autovalidate 是否自动校验输入内容
 * onWillPop 决定Form所在的路由是否可以直接返回（
 *
 *
 * */

class FromWidget extends StatefulWidget {
  @override
  _FromWidget createState() => _FromWidget();
}

class _FromWidget extends State<FromWidget> {
  //定义controller
  TextEditingController _uNameController = new TextEditingController();
  TextEditingController _pwdController = new TextEditingController();
  GlobalKey _formKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
          child: Form(
              key: _formKey,
              autovalidate: true, //开启自动校验
              child: Column(
                children: <Widget>[
                  TextFormField(
                    autofocus: true, //获取焦点
                    controller: _uNameController,
                    decoration: InputDecoration(
                        labelText: "用户名",
                        hintText: "请输入用户名或者密码",
                        icon: Icon(Icons.person)),
                    validator: (v) {
                      return v.trim().length > 0 ? null : "用户名不能为空";
                    },
                  ),
                  TextFormField(
                    controller: _pwdController,
                    decoration: InputDecoration(
                        labelText: "密码",
                        hintText: "请输入密码",
                        icon: Icon(Icons.lock)),
                    validator: (v) {
                      return v.trim().length > 5 ? null : "密码最少为6位";
                    },
                  )
                ],
              )),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 28.0),
          child: Row(
            children: <Widget>[
              Expanded(
                  child: RaisedButton(
                      padding: EdgeInsets.all(15.0),
                      child: Text("登录"),
                      color: Theme.of(context).primaryColor,
                      onPressed: () {
                        if ((_formKey.currentState as FormState).validate()) {
                          //验证通过
                        }
                      }))
            ],
          ),
        )
      ],
    );
  }
}
